<template>
  <div id="app">
    <!-- 头部 -->
    <div class="topbg">
      <div class="topName">{{userName}}</div>
      <div class="topPhone">电力协会: {{phone}}</div>
      <van-image round class="topImg" :src="headerImg" />
    </div>

    <!-- 中间内容 -->
    <div class="flex-col">
      <van-cell title="密码管理" icon="bag" is-link/>
      <van-cell title="《用户协议》  《隐私政策》" icon="label" is-link/>
      <van-cell title="关于系统" icon="info" is-link/>
    </div>

    <!-- 按钮 -->
    <div class="flex_row flex_ai_cen quitbg"> 
      <div class="flex1"></div>
      <div class="quitTXt">退出登录</div>
      <div class="flex1"></div>
    </div>
    <!-- 底部 -->
    <section class="bottom">
      <div class="flex">
        <router-link :to="{path:'/chart'}">
          <i class="icon-home icon"></i>
          <span class="txt">业务管理</span>
        </router-link>
      </div>
      <div class="flex">
        <router-link :to="{path:'/businessManage'}">
          <i class="icon-order icon"></i>
          <span class="txt">分析系统</span>
        </router-link>
      </div>
      <div class="flex active">
        <router-link :to="{path:'/personalCenter'}">
          <i class="icon-my icon"></i>
          <span class="txt">我的</span>
        </router-link>
      </div>
    </section>
  </div>
</template>
<script>
//导入组件
import Vue from 'vue';
import echarts from 'echarts'
import { Image as VanImage, Cell, CellGroup } from 'vant';
Vue.use(VanImage).use(Cell).use(CellGroup);
export default {
  //注册组件
  components: {

  },
  data(){
    return{
      headerImg:"https://img.yzcdn.cn/vant/cat.jpeg",
      userName:"泰豪迈能@AA",
      phone:"18317054494"
    }
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="less" scoped>
.topbg{
  position: relative;
  background: #ffffff;
  padding: 40px 0px 40px 20px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  .topName{
    font-family: PingFangSC-Medium;
    font-weight: bold;
    font-size: 24px;
    color: #0F0D3A;
    letter-spacing: 0;
  }
  .topPhone{
    margin-top: 5px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    letter-spacing: 0;
  }
  .topImg{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 30px;
    right: 20px;
    
  }
}
.quitbg{
  height: 55px;
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
  .quitTXt{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #F85353;
    letter-spacing: 0;
  }
}
</style>
